<template>
  <div class="cart">
    <!-- <van-nav-bar title="购物车">
      <van-text slot="left" style="color:blue" @click="onClickRight">{{rightText}}</van-text>
    </van-nav-bar> -->
    <van-checkbox-group class="card-goods" :value="checkedGoods" @change="onChange">
      <div v-for="item in cartList" :key="item.id" class="card-goods__item">
        <van-checkbox :name="item.id"></van-checkbox>
        <van-card :title="item.title" :desc="item.goods.descript" :num="item.count" :price="item.priceFormat" :thumb="item.thumb">
          <div slot="footer">
            <van-stepper v-model="item.count" @change="stepperEvent(item, arguments)" disableInput />
          </div>
        </van-card>
      </div>
    </van-checkbox-group>
    <div class="no-data" v-if="cartList.length == 0">
      <p style="text-align: center;color:lightgray">
        <van-icon name="cart-o" style="text-align: center" size="3rem" /><br />
        购物车还是空的
      </p>
      <van-button type="default" block round @click="toHome">去逛逛</van-button>
    </div>
    <div v-else>
      <van-submit-bar slot="left" :price="totalPrice" :disabled="!checkedGoods.length" :button-text="submitBarText" @submit="submit">
        <van-checkbox v-model="checkedAll" @click="checkAll" style="text-align:left;padding: 0 10px;">全选</van-checkbox>
        <van-text @click="onClickRight" style="text-align:left;color:blue;padding: 0 10px;">{{rightText}}</van-text>
      </van-submit-bar>
    </div>

  </div>
</template>

<script>
import store from "@/utils/store.js";
import utils from "@/utils/index.js";
export default {
  data() {
    return {
      checkeAllCarts: [],
      checkedGoods: [],
      cartList: [],
      isCheckAll: false,
      showEdit: false,
      rightText: "编辑"
    };
  },
  computed: {
    submitBarText() {
      const count = this.checkedGoods.length;
      if (!this.showEdit) {
        return "结算" + (count ? `(${count})` : "");
      } else {
        return "删除"
      }

    },
    totalPrice() {
      let ttp = 0;
      let t = this.cartList;
      let check = this.checkedGoods;
      for (let j = 0, l = check.length; j < l; j++) {
        //
        for (let i = 0; i < t.length; i++) {
          //
          const e = t[i];
          if (check[j] == e.id) {
            let th = e.price * e.count;
            ttp = ttp + th;
          }
        }
      }
      let r = ttp;
      return r
    },

    checkedAll() {
      let tList = this.checkedGoods
      console.log("tList..   ", tList.length);
      if (tList.length != 0) {
        this.isCheckAll = true
        return true
      } else {
        this.isCheckAll = false
        return false
      }
    }
  },
  onLoad() {


  },
  onShow() {
    let that = this;
    this.cartList = [];
    this.checkeAllCarts = [];
    this.getCartData();
    this.showEdit = false
    this.rightText = '编辑'
    wx.getSetting({
      success: function (res) {
        console.log('setting', res)
        if (res.authSetting['scope.userInfo']) {
        } else {
          const url = "/pages/profile/loginOption/index";
          wx.navigateTo({ url });
        }
      }
    })
  },
  methods: {
    onClickRight() {
      console.log('aa')
      if (this.showEdit === true) {
        this.showEdit = false
        this.rightText = '编辑'
      } else {
        this.showEdit = true
        this.rightText = '完成'
      }
    },
    remove() {
      cartApi.remove(this.checkedCartItem).then(response => {
        this.init()
      })
    },
    getCartData() {
      let that = this
      that.$API.get("user/cart/queryByUser").then(res => {
        const cartList = res.data;
        that.cartList = [];
        that.checkedGoods = [];
        for (let index = 0; index < cartList.length; index++) {
          cartList[index].priceFormat = utils.formatPrice(
            cartList[index].price
          );
          cartList[index].thumb = utils.fileMgrUrl + cartList[index].goods.pic;
          if (cartList[index].goods.stock <= cartList[index].count) {
            cartList[index].count = cartList[index].goods.stock;
          }
          console.log("this.checkedGoods log 1", that.checkedGoods);
          that.checkedGoods.push(cartList[index].id + "");
          console.log("this.checkedGoods log 2", that.checkedGoods);
        }
        that.cartList = cartList;
      });
    },
    onChange(e) {
      this.checkedGoods = e.mp.detail;

    },
    checkAll() {
      console.log("this.checkedGoods", this.checkedGoods);
      console.log("this.cartList", this.cartList);
      if (this.isCheckAll) {
        this.checkedGoods = [];
        this.isCheckAll = false
      } else {
        this.checkedGoods = []
        for (let i = 0; i < this.cartList.length; i++) {
          const e = this.cartList[i];
          this.checkedGoods.push(e.id + "")
        }
        console.log("this.checkedGoodsthis.checkedGoods", this.checkedGoods);
        this.isCheckAll = true
      }
    },
    submit() {
      if (this.showEdit) {
        console.log('调用删除接口');
        // let idCarts = []
        // for (let i = 0; i < this.checkedGoods.length; i++) {
        //   const e = this.checkedGoods[i];
        //   idCarts.push(parseInt(e))
        // }
        let idCarts = this.checkedGoods.join(",");
        this.$API.delete("user/cart?ids=" + idCarts)
          .then(res => {
            console.log("删除接口", res);
          });
        this.getCartData()
      } else {
        let idCarts = this.checkedGoods.join(",");
        const url = "/pages/checkout/index?idCarts=" + idCarts;
        wx.navigateTo({ url });
      }

    },
    toHome() {
      const url = "/pages/index/index";
      wx.switchTab({ url });
    },
    stepperEvent(item, arg) {



      if (arg[0].mp.detail >= item.goods.stock) {
        item.count = item.goods.stock;
        this.$API
          .post("user/cart/update/" + item.id + "/" + item.goods.stock)
          .then(res => { });
        this.getCartData();
        return;
      }

      this.$API
        .post("user/cart/update/" + item.id + "/" + arg[0].mp.detail)
        .then(res => { });
      this.getCartData();
    },
    decrement() {
      store.commit("decrement");
    },
    toOrder(status) { },
    formatPrice(price) {
      return utils.formatPrice(price);
    }
  }
};
</script>


<style>
.van-submit-bar {
  bottom: 48px;
}
.no-data {
  margin-top: 60%;
}
.card-goods {
  background-color: #fff;
}

.card-goods__item {
  position: relative;
  background-color: #fafafa;
}

.van-card {
  margin-left: 20px;
}

.van-checkbox__label {
  width: 100%;
  height: auto;
  padding: 0 10px 0 15px;
  box-sizing: border-box;
}

.van-checkbox__icon {
  top: 50%;
  left: 10px;
  z-index: 1;
  position: absolute;
  margin-top: -10px;
}

.van-card__price {
  color: #f44;
}
</style>
